
<template>
  <div class="NoCardhead" @click="celconmask">
    <div v-wechat-title="$route.meta.title"></div>
    <ul>
      <li
        class="ConList"
        v-for="(pw,index) in pwlist"
        :key="index"
        @click="payR(pw)"
        v-if="pw.aisleCode=='cje'||pw.aisleCode=='xse'"
      >
        <div class="ConHead pr">
          <div class="ConHeadCon" :id="'bb-'+index">
            <div style="float:left;width:15%; margin-right: 10px;">
              <img
                class="img"
                style="width:100%;"
                src="http://hstatic.1818pay.cn/image/banklogo/yl.png"
              />
            </div>
            <div class="f16 pr" style=" float: left;  width: 46%;">
              <div style="font-size: 14px; width: 98%;">
                {{pw.aisleName}}
                <img
                  class="pa"
                  style="width: 13px;right:0;top: 4px;"
                  @click="iconwaringlistb(index)"
                  src="../img/sy_sm@3x.png"
                />
              </div>
              <div style="font-size:12px;color:#949494;margin-top: 3px;">
                单笔限额
                <span>{{pw.minAmount/100}}</span>
                -{{pw.maxAmount/100}}
              </div>
            </div>
            <div style="text-align: right;">
              <!-- <div style="font-size:12px;padding-top:4px;">费率{{pw.rate}}%+{{pw.d0Fee/100}}元</div> -->
              <div
                style="font-size:12px;padding-top:4px;"
              >费率{{GLOBAL.accMul(pw.rate,100)}}%+{{multiple(pw.d0Fee,100)}}元</div>
              <div
                class="cd8"
                style="font-size:12px;color:#949494; margin-top: 3px;"
              >交易时间:{{pw.tradeTime}}</div>
            </div>
          </div>
          <div class="cb"></div>
          <!-- 遮罩层  -->
          <div :id="'dd-'+index" class="pa" style="top:1.2rem;display:none;z-index: 11;width: 94%;">
            <div class="pr">
              <!-- <img class="pa" style="top: -8px;left:5rem;width: 14px; opacity: .6;" src="../img/dhk2@2x.png" alt=""> -->
              <span class="sanjiao pa"></span>
              <div class="zhe">
                <span>{{pw.remarks}}</span>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
var $th = "";
import { Toast } from "vant";
export default {
  data() {
    return {
      city: "",
      ip: [],
      list: [],
      pwlist: [],
      // host:'http://47.104.25.147',
      host: this.GLOBAL.host,
      // host:'http://192.168.1.117:1188',
      // host:'http://118.190.148.212:8080',
      index: 0, //判断点击遮罩层的次数是否为双数
      indexindex: null, //当前第几个遮罩层
      mask: false,
      rate: null,
      d0fee: null,
      userid: "" //用户id
    };
  },
  async created() {
    $th = this;
    //获取id
    var id = this.getUrl("id");
    if (id) {
      localStorage.setItem("Userid", id); //用户id
    } else {
      id = localStorage.getItem("Userid");
    }
    $th.userid = id;
    //获取卡列表
    var getAisleList = await this.$axios(
      this.GLOBAL.host + "/aisle/getAisleList",
      {
        sort: "orderBy",
        order: "desc",
        pageSize: 100,
        id: id
      },
      "get"
    );
    if (getAisleList.code == "0000") {
      $th.pwlist = getAisleList.data;
      // $th.creditCardList = reqXFindList.data;
    } else {
      $th.$toast(getAisleList.msg);
      return;
    }
  },

  methods: {
    cjpassageway() {
      //畅捷通道
      this.$router.push({
        name: "/cj/Cjpassageway",
        params: {
          id: "456",
          name: "你好"
        }
      });
    },
    //取消弹窗
    celconmask() {
      if (this.mask == true) {
        this.mask = false;
        this.index = 0;
        document.getElementById("dd-" + this.indexindex).style.display = "none";
        return;
      }
    },
    payR(pw) {
      if (this.mask == true) {
        this.mask = false;
        this.index = 0;
        document.getElementById("dd-" + this.indexindex).style.display = "none";
        return;
      }
      // return Toast('通道正在维护中，暂不可用');
      // console.log(pw)
      //  Toast("收银台升级维护，暂不可用");
      //  return
      if (pw.aisleCode != "cje" && pw.aisleCode != "xse") {
        return Toast("收银台升级维护，暂不可用");
      }
      // new Date(new Date(new Date() ).toLocaleDateString()).getTime()
      var a = new Date(new Date().toLocaleDateString()).getTime(); //当前0点
      var newtime = new Date().getTime(); //当前时间
      var createtime = pw.tradeTime.split("-")[0];
      var endtime = pw.tradeTime.split("-")[1];
      if (
        newtime - a <= this.GLOBAL.timeData(createtime) ||
        newtime - a >= this.GLOBAL.timeData(endtime)
      ) {
        return Toast("请在" + pw.tradeTime + "进行交易");
      }

      if(pw.productIdentif == "XSB99"){  //新生通道不做以下校验
         localStorage.setItem("passageway", JSON.stringify(pw)); //存储通道的费率
           $th.$router.push({
                name: "/xs/Cjpassageway"
            });
          return
      }
      Toast.loading({
        mask: true,
        message: "加载中"
      });
      axios
        .get(this.host + "/Information/select", {
          //查上传信息
          params: {
            id: $th.userid
          }
        })
        .then(res => {
          Toast.clear();
          // console.log(res.data.code)
          if (res.data.code == "1000") {
            this.GLOBAL.pw = pw;
            if (pw.productIdentif == "CJB99"||pw.productIdentif == "XSB99") {
              //畅捷路由跳转
              //校验注册
              axios
                .get(this.host + "/cjRegister/checkRegister", {
                  params: {
                    customerId: $th.userid,
                    rate: pw.rate,
                    d0fee: pw.d0Fee,
                    creditCardId: pw.creditCards[0].id //信用卡id
                  }
                })
                .then(res => {
                  if (res.data.code == "0000") {
                    localStorage.setItem("passageway", JSON.stringify(pw)); //存储通道的费率
                    if (pw.productIdentif == "CJB99") { //畅捷
                      $th.$router.push({
                        name: "/cj/Cjpassageway"
                      });
                    } 
                  } else {
                    Toast(res.data.msg);
                  }
                });

              return;
            }
            if (pw.productIdentif != "PNS66") {
              this.$router.push({
                //云闪付
                name: "yunMpay"
              });
            } else {
              this.$router.push({
                name: "pay"
              });
            }
            // console.log("pw",pw)
          } else {
            return Toast("您的资料尚未上传成功，请退出后重试");
          }
        });
    },
    //点击感叹号
    iconwaringlistb(val) {
      console.log(val);
      window.event ? (window.event.cancelBubble = true) : e.stopPropagation(); //阻止事件冒泡
      this.index++;
      // console.log(this.index%2)
      var width = document.getElementById("bb-" + val).firstChild.clientWidth;
      // console.log('width',width)
      width += document.getElementById("bb-" + val).firstChild.nextSibling
        .clientWidth;
      // console.log(width)
      // console.log('gao',document.getElementById('dd-'+val).lastChild.lastChild.clientHeight)
      document.getElementById("dd-" + val).firstChild.firstChild.style.left =
        width - 5 + "px";
      if (this.index % 2 == 0) {
        document.getElementById("dd-" + this.indexindex).style.display = "none";
        this.mask = false;
      } else {
        this.indexindex = val;
        //  console.log('上一个',this.indexindex)
        document.getElementById("dd-" + val).style.display = "block";
        this.mask = true;
      }
    }
  }
};
</script>
<style >
.NoCardhead {
  width: 90%;
  margin: auto;
  color: black;
}

.NoCardhead .ConHead {
  background-color: #fff;
  padding: 0.4rem 10px;
}

.NoCardhead .ConList {
  border-radius: 10px;
  /* margin: 20px 0; */
  padding-top: 20px;
}

.ConHead .ConHeadCon {
  /* width: 200px; */
}

.ConHead .ConHeadCon .img {
  float: left;
  margin-top: 3px;
  margin-right: 10px;
}
.pr {
  position: relative;
}
.pa {
  position: absolute;
}
.zhe {
  background: #5a5a5a;
  opacity: 0.9;
  color: white;
  padding: 5px 10px;
  font-size: 13px;
  border-radius: 5px;
  width: 85%;
  margin: 0 auto;
  line-height: 20px;
}
html,
body,
#app,
.NoCardhead {
  height: 100%;
}
.dl {
  display: inline-block;
}
.sanjiao {
  content: "";
  top: 2px;
  left: -38px;
  border-width: 0 7px 8px;
  border-style: solid;
  border-color: transparent transparent #696969;
  top: -7px;
  left: 5rem;
  z-index: 99;
}
</style>